<template>
    <section class="secretary-change">
        <div class="cadreList">
            <div  style="flex:1">
                <div class="topCard">
                    <el-card style="height:100%;text-align: left" class="titleCard">
                        <p style="color: white;font-size: 20px;margin-top:-5px;">村书记新任办理</p>
                        <a style="color: hsla(0,0%,100%,.62);;margin-top:6px;position: absolute;font-size: 14px;">基本信息</a>
                    </el-card>
                </div>
                <el-card class="content" v-loading="positionListLoading">
                    <div v-if="user.sysDistrict.districtLevel===1" style="text-align: left;margin: 20px 0">
                        <el-select v-model="townDistrictId" clearable filterable placeholder="请选择所属镇党委"
                                   :popper-append-to-body="false" popper-class="select-popper" @change="queryChange()" >
                            <el-option
                                v-for="item in townList"
                                :key="item.districtId"
                                :label="item.districtName"
                                :value="item.districtId">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="display: flex" v-if="positionList.length>0">
                        <div style="flex:1;">
                            <div style="min-height: 500px;">
                                <div v-for="(item,index) in positionList" :class="positionIndexActive==index ? 'positionItemActive':'positionItem'"  @click="handleSelected(item,index)">
                                    <el-col :span="16">
                                        <div class="header_img">
                                            <el-image :src="item.headSculpture" class="header_img1" v-if="item.headSculpture"></el-image>
                                            <el-image :src="defaultImg" class="header_img_default"  v-else></el-image>
                                        </div>
                                        <span class="position-label">
                                            <p>{{item.name.replace(/支部/g,'')}}</p>
                                            <p class="town-label">{{item.parentDistrictName ? item.parentDistrictName.replace(/党委/g, '') : '暂无镇信息'}}</p>
                                        </span>
                                        </el-col>
                                        <el-col :span="8">
                                            <p class="no-person">暂无任职人员</p>
                                        </el-col>
                                </div>
                            </div>
                        </div>
                        <div class="position-right el-card" :class="positionIndexActive==0 ? 'position-right-radius':'position-right'">
                            <h4>岗位信息</h4>
                            <div class="position-info">
                                <div class="property-item">
                                    <span class="label">岗位名称：</span>
                                    <span class="value">{{form.name}}</span>
                                </div>
                                <div class="property-item">
                                    <span class="label">镇级组织：</span>
                                    <span class="value">{{form.parentDistrictName}}</span>
                                </div>
                                <div class="property-item">
                                    <span class="label">村级组织：</span>
                                    <span class="value">{{form.districtName}}</span>
                                </div>
                                <div class="property-item">
                                    <span class="label">职位类型：</span>
                                    <span class="value">{{post}}</span>
                                </div>
                            </div>
                            <h4>任职信息</h4>
                            <div class="position-info">
                                <el-form :model="form" :rules="rules"  ref="form" label-width="80px" inline>
                                    <el-form-item label="任职人员" prop="cadreName" class="property-form-item">
                                        <el-input v-model="form.cadreName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="任职附件" prop="appointmentAnnex" class="property-form-item">
                                        <FileUpload :value="form.appointmentAnnex" :limit="1" :disabled="false" @getValue="form.appointmentAnnex = $event" style="width: 100px;height: 27px;line-height: 27px" class="file_btn"></FileUpload>
                                    </el-form-item>
                                    <el-form-item label="输入密码" prop="password" class="property-form-item">
                                        <el-input v-model="form.password" type="password"></el-input>
                                    </el-form-item>
                                    <el-form-item label="  " class="property-form-item">
                                        <el-button type="primary" size="small" icon="el-icon-document-checked" :loading="submitLoad" @click="submitOffice('form')" class="save_btn">确认新任</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                    <div v-else class="nolist_image"><el-image src="static/img/csj/noList.png"></el-image></div>
                    <div style="margin-top: 30px;display: flex"  v-if="positionList.length>0">
                        <div style="flex: 1">
                            <el-pagination style="text-align: center;overflow: scroll;" background
                                           small
                                           :pager-count="5"
                                           :page-size="8"
                                           :total="pageable.total" :current-page.sync="pageable.currentPage"
                                           :page-size.sync="pageable.pageSize"
                                           @current-change="currentChange" @size-change="sizeChange"
                                           layout="total, prev, pager, next">
                            </el-pagination>
                        </div>
                        <div style="flex: 1"></div>
                    </div>
                </el-card>
            </div>
            <div  style="flex:1">
                <div class="topCard">
                    <el-card style="height:100%;text-align: left" class="titleCard">
                        <p style="color: white;font-size: 20px;margin-top:-5px;">村书记离任办理</p>
                        <a style="color: hsla(0,0%,100%,.62);;margin-top:6px;position: absolute;font-size: 14px;">基本信息</a>
                    </el-card>
                </div>
                <el-card class="content" v-loading="cadreListLoading">
                    <div v-if="user.sysDistrict.districtLevel===1" style="text-align: left;margin: 20px 0">
                        <el-select v-model="cadreDistrictId" clearable filterable placeholder="请选择所属镇党委"
                                   :popper-append-to-body="false" popper-class="select-popper" @change="queryChange('cadre')">
                            <el-option
                                v-for="item in townList"
                                :key="item.districtId"
                                :label="item.districtName"
                                :value="item.districtId">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="display: flex" v-if="cadreList.length>0">
                        <div style="flex:1;" >
                            <div style="min-height: 500px">
                                <div v-for="(item,index) in cadreList"  :class="cadreIndexActive==index ? 'cadreItemActive':'cadreItem'" @click="handleSelected(item,index,'cadre')">
                                    <el-col :span="16">
                                        <div class="header_img">
                                            <el-image :src="item.headSculpture" class="header_img1" v-if="item.headSculpture"></el-image>
                                            <el-image :src="defaultImg" class="header_img_default"  v-else></el-image>
                                        </div>
                                        <span class="position-label">
                                        <p>{{item.name.replace(/支部/g,'')}}</p>
                                        <p class="town-label">{{item.parentDistrictName ? item.parentDistrictName.replace(/党委/g, '') : '暂无镇信息'}}</p>
                                    </span>
                                    </el-col>
                                    <el-col :span="8">
                                        <p class="no-person">{{item.cadreName}}</p>
                                    </el-col>
                                </div>
                            </div>
                        </div>
                        <div class="position-right el-card" :class="cadreIndexActive==0 ? 'position-right-radius':'position-right'">
                            <h4>岗位信息</h4>
                            <div class="position-info">
                                <div class="property-item">
                                    <span class="label">岗位名称：</span>
                                    <span class="value">{{leaveForm.name}}</span>
                                </div>
                                <div class="property-item">
                                    <span class="label">镇级组织：</span>
                                    <span class="value">{{leaveForm.parentDistrictName}}</span>
                                </div>
                                <div class="property-item">
                                    <span class="label">村级组织：</span>
                                    <span class="value">{{leaveForm.districtName}}</span>
                                </div>
                                <div class="property-item">
                                    <span class="label">职位类型：</span>
                                    <span class="value">{{post}}</span>
                                </div>
                            </div>
                            <h4>离任信息</h4>
                            <div class="position-info">
                                <el-form :model="leaveForm" :rules="leaveRules"  ref="leaveForm" label-width="80px" inline>
                                    <el-form-item label="任职人员" prop="cadreName" class="property-form-item">
                                        <el-input v-model="leaveForm.cadreName" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="离任附件" prop="termFile" class="property-form-item">
                                        <FileUpload :value="leaveForm.termFile" :limit="1" :disabled="false" @getValue="leaveForm.termFile = $event" style="width: 150px;" class="file_btn"></FileUpload>
                                    </el-form-item>
                                    <el-form-item label="输入密码" prop="password" class="property-form-item">
                                        <el-input v-model="leaveForm.password" type="password"></el-input>
                                    </el-form-item>
                                    <el-form-item label="  " class="property-form-item">
                                        <el-button type="primary" size="small" icon="el-icon-document-checked" :loading="leaveSubmitLoad" @click="leaveOffice('leaveForm')" class="save_btn">确认离任</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                    <div v-else class="nolist_image">
                        <el-image src="static/img/csj/noList.png"></el-image>
                    </div>
                    <div style="margin-top: 30px;display: flex" v-if="cadreList.length>0">
                        <div style="flex: 1">
                            <el-pagination style="text-align: right;overflow: scroll" background
                                           small
                                           :pager-count="5"
                                           :page-size="8"
                                           :total="cadrePageable.total" :current-page.sync="cadrePageable.currentPage"
                                           :page-size.sync="cadrePageable.pageSize"
                                           @current-change="(value) => {currentChange(value, 'cadre')}" @size-change="sizeChange"
                                           layout="total, prev, pager, next">
                            </el-pagination>
                        </div>
                        <div style="flex: 1"></div>
                    </div>
                </el-card>
            </div>
        </div>
        <div class="cadreList">
             <div style="flex: 1">
                 <div>
                     <div class="topCard">
                         <el-card style="height:100%;text-align: left" class="titleCard">
                             <p style="color: white;font-size: 20px;margin-top:-5px;">新任村书记列表</p>
                             <a style="color: hsla(0,0%,100%,.62);;margin-top:6px;position: absolute;font-size: 14px;">基本信息</a>
                         </el-card>
                     </div>
                     <el-card v-loading="newestLoading" class="content">
                         <div style="text-align: right;margin: 20px 44px 20px 0" v-if="user.sysDistrict.districtLevel===1">
                             <el-select v-model="newestDistrictId" clearable filterable placeholder="请选择所属镇"
                                        :popper-append-to-body="false" popper-class="select-popper" @change="queryChange('newest')">
                                 <el-option
                                     v-for="item in townList"
                                     :key="item.districtId"
                                     :label="item.districtName"
                                     :value="item.districtId">
                                 </el-option>
                             </el-select>
                         </div>
                         <div v-if="newestCadreList.length>0">
                             <div v-for="(item,index) in newestCadreList"  :class="newestCadreIndexActive==index ? 'retiredItemActive':'retiredItem'"  @click="handleSelected(item,index,'newest')" @mouseenter="del(index)" @mouseleave="undel">
                                 <div>
                                     <el-col :span="2" style="text-align: left">
                                         <div class="header_img" style="margin-top: 10px">
                                             <el-image :src="item.headSculpture" class="header_img1" v-if="item.headSculpture"></el-image>
                                             <el-image :src="defaultImg" class="header_img_default"  v-else></el-image>
                                         </div>
                                     </el-col>
                                     <el-col :span="8" style="text-align: left">
                                         <span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="list_label">所属组织:</span>{{item.districtName.indexOf('支部')>-1?item.districtName.replace(/支部/,''):item.districtName}}</span>
                                     </el-col>
                                     <el-col :span="4" style="text-align: left">
                                         <span><span class="list_label">姓名:</span>{{item.cadresName}}</span>
                                     </el-col>
                                     <el-col :span="8" style="text-align: left">
                                         <span><span class="list_label">任职时间:</span>{{item.appointmentTime}}</span>
                                     </el-col>
                                     <el-col :span="2" style="text-align: left;">
                                         <el-image @click="delCadreNew(item.id)" class="delete_icon" src="../../static/img/csj/del.png" v-if="delIndex===index">删除</el-image>
                                     </el-col>
                                 </div>
                             </div>
                             <el-pagination style="text-align: center;margin-right: 70px;margin-top: 25px" background
                                            small
                                            :pager-count="5"
                                            :page-size="8"
                                            :total="newestPageable.total" :current-page.sync="newestPageable.currentPage"
                                            :page-size.sync="newestPageable.pageSize"
                                            @current-change="(value) => {currentChange(value, 'newest')}" @size-change="(value) => sizeChange(value, 'newest')"
                                            layout="total, prev, pager, next">
                             </el-pagination>
                         </div>
                         <div v-else class="nolist_image"><el-image src="static/img/csj/noList.png"></el-image></div>
                     </el-card>
                 </div>
             </div>
            <div style="flex: 1">
                <div>
                    <div class="topCard">
                        <el-card style="height:100%;text-align: left" class="titleCard">
                            <p style="color: white;font-size: 20px;margin-top:-5px;">离任村书记列表</p>
                            <a style="color: hsla(0,0%,100%,.62);;margin-top:6px;position: absolute;font-size: 14px;">基本信息</a>
                        </el-card>
                    </div>
                    <el-card v-loading="retiredLoading" class="content">
                        <div style="text-align: right;margin: 20px 44px 20px 0" v-if="user.sysDistrict.districtLevel===1">
                            <el-select v-model="retiredDistrictId" clearable filterable placeholder="请选择所属镇"
                                       :popper-append-to-body="false" popper-class="select-popper" @change="queryChange('retired')">
                                <el-option
                                    v-for="item in townList"
                                    :key="item.districtId"
                                    :label="item.districtName"
                                    :value="item.districtId">
                                </el-option>
                            </el-select>
                        </div>
                        <div v-if="cadreRetiredList.length>0">
                            <div v-for="(item,index) in cadreRetiredList"  :class="cadreRetiredIndexActive==index ? 'retiredItemActive':'retiredItem'"  @click="handleSelected(item,index,'retired')"  @mouseenter="del1(index)" @mouseleave="undel1">
                                <div>
                                    <el-col :span="2" style="text-align: left">
                                        <div class="header_img" style="margin-top: 10px">
                                            <el-image :src="item.headSculpture" class="header_img1" v-if="item.headSculpture"></el-image>
                                            <el-image :src="defaultImg" class="header_img_default"  v-else></el-image>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" style="text-align: left">
                                        <span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="list_label">所属组织:</span>{{item.districtName.indexOf('支部')>-1?item.districtName.replace(/支部/,''):item.districtName}}</span>
                                    </el-col>
                                    <el-col :span="4" style="text-align: left">
                                        <span><span class="list_label">姓名:</span>{{item.cadresName}}</span>
                                    </el-col>
                                    <el-col :span="5" style="text-align: left">
                                        <span><span class="list_label">任职时间:</span>{{item.appointmentTime}}</span>
                                    </el-col>
                                    <el-col :span="5" style="text-align: left">
                                        <span><span class="list_label">离职时间:</span>{{item.departureTime}}</span>
                                    </el-col>
                                    <el-col :span="2" style="text-align: left">
                                        <el-image @click="delCadre(item.id)" class="delete_icon" src="../../static/img/csj/del.png" v-if="delIndex1===index">删除</el-image>
                                    </el-col>
                                </div>
                            </div>
                            <el-pagination style="text-align: center;margin-right: 70px;margin-top: 25px" background
                                           small
                                           :pager-count="5"
                                           :page-size="8"
                                           :total="retiredPageable.total" :current-page.sync="retiredPageable.currentPage"
                                           :page-size.sync="retiredPageable.pageSize"
                                           @current-change="(value) => {currentChange(value, 'retired')}" @size-change="(value) => sizeChange(value, 'retired')"
                                           layout="total, prev, pager, next">
                            </el-pagination>
                        </div>
                        <div v-else class="nolist_image"><el-image src="static/img/csj/noList.png"></el-image></div>
                    </el-card>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    import FileUpload from '@/components/FileUpLoad';
    import md5 from '@/utils/md5';
    export default {
        name: "SecretaryChange",
        data(){
            return{
                user:{},
                submitLoad:false,//新任提交按钮load
                form:{
                    appointmentAnnex: '111'
                },//新任表单
                selected:'',//选中
                rules:{
                    cadreName: [
                        { required: true, trigger: 'blur', message: '请输入任职人员'},
                    ],
                    appointmentAnnex: [
                        {required: true, validator: (rule, value, callback) => {
                                if (!this.form[rule.field]) {
                                    callback(new Error('请上传任命文件！'));
                                } else {
                                    callback();
                                    return true;
                                }
                            }, trigger: 'change'},
                    ],
                    password: [
                        { required: true, trigger: 'blur', message: '请输入密码'},
                    ],
                },
                leaveRules:{
                    termFile: [
                        {required: true, validator: (rule, value, callback) => {
                                if (!this.leaveForm[rule.field]) {
                                    callback(new Error('请上传任命文件！'));
                                } else {
                                    callback();
                                    return true;
                                }
                            }, trigger: 'change'},
                    ],
                    password: [
                        { required: true, trigger: 'blur', message: '请输入密码'},
                    ],
                },
                post:'村书记',
                positionList:[],//第一个列表
                cadreList: [],//第二个列表
                newestCadreList:[],//第三个列表
                cadreRetiredList: [],//第四个列表
                positionUrl: '/identity/cadrePosition/isExist',
                leaveCadreUrl:'/identity/villageCadresTerm',
                pageable: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 8,
                },
                cadrePageable: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 8,
                },
                newestPageable: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 8,
                },
                retiredPageable: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 8,
                },
                positionListLoading: false,
                cadreListLoading:false,
                newestLoading:false,
                retiredLoading: false,
                townDistrictId: '',
                cadreDistrictId:'',
                newestDistrictId:'',
                retiredDistrictId: '',
                townList: [],
                leaveForm:{
                    termFile: ''
                },
                postPath:'',
                cadrePath:'',
                retiredPath:'',
                retiredSelected:'',
                leaveSelected:'',
                leaveSubmitLoad:false,
                positionIndexActive:0,//第一个列表选中
                cadreIndexActive: 0,//第二个列表选中
                newestCadreIndexActive:-1,//第三个列表选中
                cadreRetiredIndexActive: -1,//第四个列表选中,
                defaultImg:'../../static/img/csj/default.png',
                delIndex:-1,
                delIndex1:-1
            }
        },
        methods:{
            del(index){
                this.delIndex = index;
            },
            undel(){
                this.delIndex = -1;
            },
            del1(index){
                this.delIndex1 = index;
            },
            undel1(){
                this.delIndex1 = -1;
            },
            currentChange(value, type) {
                let path;
                if(type==='retired'){
                    this.retiredPageable.currentPage = value;
                    path = `${this.leaveCadreUrl}/page?page=${value - 1}&size=8`;
                }else if(type==='cadre'){
                    this.cadreIndexActive = 0;
                    this.cadrePageable.currentPage = value;
                    path = `${this.positionUrl}/page?page=${value - 1}&size=8`;
                }else if(type=='newest'){
                    this.newestPageable.currentPage = value;
                    path = `${this.leaveCadreUrl}/page?page=${value - 1}&size=8`;
                }else{
                    this.positionIndexActive = 0;
                    this.pageable.currentPage = value;
                    path = `${this.positionUrl}/page?page=${value - 1}&size=8`;
                }
                this.loadPosition(path, type);
            },
            sizeChange(value, type) {
               /* let path = `${this.positionUrl}/page?page=0&size=8`;
                this.loadPosition(path, type)*/
            },
            queryChange(type){
                let path;
                if(type==='retired'){
                    this.retiredPageable.currentPage = 1;
                    path = `${this.leaveCadreUrl}/page?page=0&size=8`;
                }else if(type==='cadre'){
                    this.cadrePageable.currentPage = 1;
                    path = `${this.positionUrl}/page?page=0&size=8`;
                }else if(type=='newest'){
                    this.newestPageable.currentPage = 1;
                    path = `${this.leaveCadreUrl}/page?page=0&size=8`;
                }else{
                    this.pageable.currentPage = 1;
                    path = `${this.positionUrl}/page?page=0&size=8`;
                }
                this.loadPosition(path, type);
            },

            handleSelected(item,index,type){
                if(type==='cadre'){
                    this.cadreIndexActive = index;
                    this.leaveForm =  Object.assign({termFile: ''}, item);
                    this.leaveSelected = item;
                }else if(type==='retired'){
                    this.cadreRetiredIndexActive = index;
                    this.retiredSelected = item;
                }else if(type=='newest'){
                    this.newestCadreIndexActive = index;
                }else{
                    this.positionIndexActive = index;
                    this.form = Object.assign({}, item);
                    this.selected = item;
                }
            },

            leaveOffice(form){
                if (!this.leaveForm.districtId) {
                    this.$message({
                        type: 'warning',
                        message: '请选择一个村书记！'
                    });
                    return;
                }
                this.$refs.leaveForm.validate((valid) => {
                    if (valid) {
                        let userName = sessionStorage.getItem("user");
                        this.$http('POST', `/identity/sysUser/list`, {userName:userName,password:md5.hex_md5(this.leaveForm.password)}, false).then(data=>{
                            if(data.length == 0){
                                this.$message({
                                    message:'密码输入错误',
                                    type:'warning'
                                });
                                return null;
                            }else{
                                this.leaveSubmitLoad = true;
                                let param = {
                                    cadresId: this.leaveForm.cadreId,
                                    termFile: this.leaveForm.termFile,
                                    positionId: this.leaveForm.id
                                };
                                this.$http('POST',`identity/villageCadres/departure`, param, false).then(data=>{
                                    this.leaveSubmitLoad = false;
                                    this.leaveForm = {termFile: ''};
                                    this.leaveSelected = '';
                                    this.loadPosition(this.postPath);
                                    this.loadPosition(this.cadrePath,'cadre');
                                    this.loadPosition(this.retiredPath,"retired");
                                    this.loadPosition(this.retiredPath,'newest');
                                    this.$message({
                                        type: 'success',
                                        message:'离任成功！'
                                    });
                                }).catch(() => {
                                    this.leaveSubmitLoad = false;
                                });
                            }
                        });
                    }
                });
            },
            submitOffice(form){
                if (!this.form.districtId) {
                    this.$message({
                        type: 'warning',
                        message: '请选择一个村书记岗位！'
                    });
                    return;
                }
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        let userName = sessionStorage.getItem("user");
                        this.$http('POST', `/identity/sysUser/list`, {userName:userName,password:md5.hex_md5(this.form.password)}, false).then(data=>{
                            if(data.length == 0){
                                this.$message({
                                    message:'密码输入错误',
                                    type:'warning'
                                })
                                return null;
                            }else{
                                this.submitLoad = true;
                                let newCadre = {
                                    positionId:this.form.id,
                                    districtId:this.form.districtId,
                                    parentDistrictName:this.form.parentDistrictName,
                                    districtName:this.form.districtName,
                                    name:this.form.cadreName,
                                    cadresType: "SECRETARY",
                                    hasRetire: "0",
                                    appointmentAnnex:this.form.appointmentAnnex,
                                    headSculpture: 'http://122.97.218.162:8888/g1/M00/00/B2/rBAAx151x-6AbVcSAAAJJXxlLy0086.png'
                                };
                                this.$http('POST',`identity/villageCadres/addBaseInfo`,newCadre,false).then(data=>{
                                    this.submitLoad = false;
                                    this.form = {appointmentAnnex:''};
                                    this.selected = '';
                                    this.loadPosition(this.postPath);
                                    this.loadPosition(this.cadrePath,'cadre');
                                    this.loadPosition(this.retiredPath,'newest')
                                    this.$message({
                                        type: 'success',
                                        message: '任职成功'
                                    });
                                }).catch(() => {
                                    this.submitLoad = false;
                                });
                            }
                        });
                    }
                });
            },
            loadPosition(path, type) {
                this.form = {appointmentAnnex:''}//清除当前选中的行数据
                this.leaveForm = {termFile:''};
                if(this.user.sysDistrict.districtLevel===2){
                    this.retiredDistrictId = this.user.districtId;
                    this.cadreDistrictId = this.user.districtId;
                    this.townDistrictId = this.user.districtId;
                    this.newestDistrictId = this.user.districtId;
                }
                let param = {districtId:this.user.districtId};
                if (type === 'retired') {
                    param.cadresType= 'SECRETARY';
                    param.hasRetire = '-1';
                    this.retiredLoading = true;
                    param.districtId = this.retiredDistrictId;
                    param.termType = 1;
                } else if(type=== 'cadre'){
                    param.post='SECRETARY';
                    param.isExist = '1';
                    this.cadreListLoading = true;
                    param.districtId = this.cadreDistrictId;
                }else if(type ==='newest'){
                    param.cadresType= 'SECRETARY';
                    this.newestLoading = true;
                    param.districtId = this.newestDistrictId;
                    param.termType = 0;
                }else {
                    param.post='SECRETARY';
                    param.isExist = '0';
                    this.positionListLoading = true;
                    param.districtId = this.townDistrictId;
                }
                this.$http('POST', path, param, false).then(
                    data => {
                        if (type === 'retired') {
                            this.cadreRetiredList = data.content;
                            this.retiredPageable.total = data.totalElements;
                            this.retiredLoading = false;
                        }else if (type === 'cadre') {
                            this.cadreList = data.content;
                            if (this.cadreList.length > 0) {
                                Object.assign(this.leaveForm, this.cadreList[0])
                            }
                            this.cadrePageable.total = data.totalElements;
                            this.cadreListLoading = false;
                        }else if(type=='newest'){
                            this.newestCadreList = data.content;
                            this.newestPageable.total = data.totalElements;
                            this.newestLoading = false;
                        }else {
                            this.positionList = data.content;
                            if (this.positionList.length > 0) {
                              this.form = Object.assign({}, this.positionList[0]);
                            }
                            this.pageable.total = data.totalElements;
                            this.positionListLoading = false;
                        }
                    }
                ).catch( _ => {
                    this.positionListLoading = false;
                    this.retiredLoading = false;
                    this.cadreListLoading = false;
                    this.newestLoading = false;
                });
            },
            loadTown() {
                this.$http('POST', `identity/sysDistrict/list`, {districtType: 'Party', districtLevel: '2'}, false).then(data => {
                    this.townList = data;
                })
            },
            async delCadre(id) {
                await this.$http("DELETE",`identity/villageCadresTerm/${id}id`, false);
                this.loadPosition(this.retiredPath,"retired");
                this.$message({
                    type: "success",
                    message: '删除成功'
                })
            },
            async delCadreNew(id) {
                await this.$http("DELETE",`identity/villageCadresTerm/${id}id`, false);
                this.loadPosition(this.retiredPath,"newest");
                this.$message({
                    type: "success",
                    message: '删除成功'
                })
            }
        },
        components:{
            FileUpload,
        },
        mounted() {
        },
        created() {
            this.user = JSON.parse(sessionStorage.getItem('userInfo'));
            this.loadTown();
            this.postPath = `${this.positionUrl}/page?page=0&size=8`;
            this.loadPosition(this.postPath);
            this.cadrePath  = `${this.positionUrl}/page?page=0&size=8`;
            this.loadPosition(this.cadrePath,'cadre');
            this.retiredPath = `${this.leaveCadreUrl}/page?page=0&size=8`;
            this.loadPosition(this.retiredPath,"retired");
            this.loadPosition(this.retiredPath,'newest')
        }
    }
</script>

<style scoped>
    .secretary-change .cadreList{
       display: flex;
    }
    .secretary-change .topCard {
        width: 90%;
        margin: 20px auto;
        height: 80px;
        position: relative;
        z-index: 10;
    }
    .secretary-change .titleCard {
        padding-left: 10px;
        background: linear-gradient(60deg, #66aabb, #43a047);
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
    }
    .secretary-change .content {
        margin: -60px 15px 15px 15px;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        -webkit-transition: .3s;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        padding: 15px;
        height: 750px;
    }
    .secretary-change .cadreItem{
        height: 50px;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #EBEEF5;
        background: #FFF;
        text-align: left;
        border-radius: 5px;
        margin: 0 0px 10px 0;
        font-weight: bold;
        position: relative;
        overflow: hidden;
        z-index: 999;
        opacity: 0.4;
        font-size:16px;
        font-family:Microsoft YaHei UI;
        color:rgba(57,57,57,1);
    }
    .secretary-change .cadreItem:hover{
        cursor: pointer;
    }
    .secretary-change .positionItem{
        height: 50px;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #EBEEF5;
        background: #FFF;
        text-align: left;
        border-radius: 5px;
        margin: 0 0px 10px 0;
        font-weight: bold;
        position: relative;
        overflow: hidden;
        z-index: 999;
        opacity: 0.4;
        font-size:16px;
        font-family:Microsoft YaHei UI;
        color:rgba(57,57,57,1);
        line-height: 50px;
    }
    .secretary-change .self-define {
        position: absolute;
        right: -15px;
        top: -6px;
        width: 40px;
        height: 24px;
        background: #13ce66;
        text-align: center;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
        box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
        display: none;
    }
    .secretary-change .self-define i {
        color: white;
        transform: rotate(-45deg);
        top: 9px;
        left: 0;
        font-weight: 700;
        position: relative;
    }
    .secretary-change .positionItem:hover{
        cursor: pointer;
    }
    .secretary-change .positionItem:hover .self-define, .secretary-change .positionItemActive .self-define,
    .secretary-change .cadreItem:hover .self-define, .secretary-change .cadreItemActive .self-define{
        display: block;
    }
    .secretary-change .retiredItem{
        width: 98%;
        height: 50px;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #EBEEF5;
        background: #FFF;
        line-height: 50px;
        text-align: left;
        border-radius: 5px;
        margin-top: 25px;
        padding-left: 0px;
        font-size:14px;
        font-family:Microsoft YaHei UI;
        font-weight:400;
        color:rgba(57,57,57,1);
    }
    .secretary-change .retiredItem:hover{
        transform: scale(1.03);
        background-color:#E8F6EA;
        border:1px solid rgba(69, 159, 81, 1);
        color: #393939;
        cursor: pointer;
    }
    .secretary-change .retiredItemActive{
        width: 98%;
        height: 50px;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        background-color:#E8F6EA;
        border:1px solid rgba(69, 159, 81, 1);
        color: #393939;
        line-height: 50px;
        font-size: 14px;
        text-align: left;
        border-radius: 5px;
        margin-top: 25px;
        font-weight: bold;
        padding-left: 0px;
        cursor: pointer;
    }
    .save_btn{
        width:157px;
        height:38px;
        border: 1px solid #55BD94;
        background:#55BD94;
        border-radius:4px;
    }
    .save_btn:focus, .save_btn:hover {
        width:157px;
        height:38px;
        background-color:#55BD94;
        border: 1px solid #55BD94;
        border-radius:4px;
    }
    .header_img{
        display: inline-block;
        width: 32px;
        height: 32px;
        overflow: hidden;
        border-radius: 50%;
        margin-left: 20px;
    }
    .header_img1{
        height: 45px;
        width: 32px
    }
    .header_img_default{
        width: 32px;
        height: 32px;
    }
    .header_img_list{
        width:32px;
        height:32px;
        line-height: 32px;
        border-radius:50%;
        margin-left: 20px;
        margin-top: 9px;
    }
    .header_img_default_list{
        width: 32px;
        height: 32px;
        margin-left: 20px;
        margin-top: 9px;
    }
    .delete_icon{
        width:22px;
        height:22px;
        line-height: 22px;
        margin-left: 20px;
        margin-top: 13px;
    }
    .list_label{
        color: #aaa;
    }
    .nolist_image{
        margin-top: 200px;
    }
</style>

<style rel="stylesheet/scss" lang="scss">
    /*下拉项背景*/
    .secretary-change {
        .el-card__body {
            padding: 20px 10px !important;
        }
        .el-select {
            .el-input__inner {
                background: linear-gradient(60deg, #66aabb, #43a047) !important;
                color: white;
                font-weight: bold;
            }
        }
        .select-popper {
            background: linear-gradient(60deg, #66aabb, #43a047) !important;
            border-radius: 5px;
        }
        .el-popper[x-placement^=bottom] {
            .popper__arrow::after {
                border-bottom-color: #50a472;
            }
        }
        .el-input {
            input::-webkit-input-placeholder {
                color: rgba(255, 255, 255, .86);
            }
        }
        .el-select {
            width: 150px !important;
            .el-input {
                .el-select__caret {
                    color: white;
                }
            }
        }
        .el-select-dropdown__item {
            color: white;
            text-align: left;
            &:hover {
                background-color: rgba(146, 184, 249, 0.15);
                margin-right: 1px;
                color: white;
            }
            &.hover {
                background-color: rgba(146, 184, 249, 0.15);
                margin-right: 1px;
                color: white;
            }
        }
        .secretaryManagement {
            width: 98%;
        }
        .el-input--mini {
            .el-input__inner {
                width: 150px !important;
            }
        }
        .el-pagination.is-background {
            .btn-next, .btn-prev, .el-pager li {
                margin: 0 4px;
                background-color: #f4f4f5;
                color: #606266;
                min-width: 22px;
                border-radius: 2px;
            }
        }
        .rightOut {
            .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
                -webkit-box-shadow: none!important;
                box-shadow: none!important;
            }
            .el-card {
                border: none;
            }
            .el-card__body{
                padding: 0!important;
            }
        }
        .position-icon {
            margin: 8px;
            vertical-align: top;
        }
        .position-label {
            display: inline-block;
            padding: 4px 0;
            line-height: 20px;
            .town-label {
                font-size: 14px;
                color: #b6b6b6;
            }
            margin-left: 10px;
        }
        .positionItemActive{
            height: 50px;
            background: #fff;;
            font-size: 15px;
            text-align: left;
            margin: 0 -1px 10px 0;
            font-weight: bold;
            cursor: pointer;
            color: rgba(107,107,112,0.85);
            position: relative;
            overflow: hidden;
            border:1px solid rgba(69, 160, 77, 1);
            /*box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.1);*/
            z-index: 1000;
            border-right: 0px;
            border-radius: 4px 0px 0px 4px;
        }
        .cadreItemActive {
            height: 50px;
            background: #fff;;
            font-size: 15px;
            text-align: left;
            margin: 0 -1px 10px 0;
            font-weight: bold;
            cursor: pointer;
            color: rgba(107,107,112,0.85);
            position: relative;
            overflow: hidden;
            border:1px solid rgba(69, 160, 77, 1);
            /*box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.1);*/
            border-right: 0px;
            z-index: 1000;
            border-radius: 4px 0px 0px 4px;
        }
        .no-person {
            line-height: 50px;
        }
        .position-right {
            flex-basis: 360px;
            padding: 10px;
            padding-left: 30px;
            padding-top: 13px;
            h4 {
                text-align: left;
            }
            .position-info {
                padding: 0px 0;
                font-size: 14px;
                text-align: left;
                .property-item {
                    margin: 20px;
                    margin-left: 0;
                    .label {
                        color: #aaaaaa;
                    }
                }
                .property-form-item {
                    color: #aaaaaa;
                    margin-left: 0;
                    margin-top: 11px;
                    .el-button [class*=el-icon-]+span {
                        vertical-align: text-top;
                    }
                }
            }
            background:#fff;
            border:1px solid rgba(69, 160, 77, 1);
            box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.1);
            border-radius:4px;
        }
        .position-right-radius {
            border-radius:0 4px 4px 4px;
        }
    }

</style>

<style>
    .secretary-change .el-form-item__label {
        text-align: left;
        padding: 0 0 0 0;
    }
   .secretary-change .file_btn .el-button--primary {
       width:150px!important;
       height:30px!important;
       border:1px solid #55BD94!important;
       border-radius:4px!important;
       color:#55BD94!important;
       background-color: #fff;
   }
    .secretary-change .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #0A9B1A;
        color: #FFF;
    }
    .secretary-change .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #55BD94;
    }
</style>
